<script setup>
import { onMounted, ref, shallowRef } from 'vue';
import { regionOptions, partnerOptions } from './options.js';
import Select from './select.vue';
import Cascader from './cascader.vue';

const menus = [
  {
    label: '区域',
    value: 'region',
    type: 'cascader',
    options: regionOptions,
  },
  { label: '伙伴', value: 'partner', type: 'select', options: partnerOptions },
  {
    label: '伙伴2',
    value: 'partner2',
    type: 'select',
    options: partnerOptions.slice(0.2),
  },
  {
    label: '伙伴3',
    value: 'partner3',
    type: 'select',
    options: partnerOptions.slice(0.3),
  },
];

const filterRef = ref(null);
const buttonGroupRef = ref(null);
const dropdpwnTop = ref(0);

const active = ref('');
const activeComponent = ref(null);
const activeOptions = shallowRef([]);

const clickButton = (data) => {
  if (active.value === data.value) {
    active.value = '';
    activeComponent.value = null;
    activeOptions.value = [];
  } else {
    active.value = data.value;

    if (data.type === 'cascader') {
      activeComponent.value = Cascader;
      activeOptions.value = data.options;
    } else {
      activeComponent.value = Select;
      activeOptions.value = data.options;
    }
  }
};

const close = () => {
  active.value = '';
  activeComponent.value = null;
  activeOptions.value = [];
};

onMounted(() => {
  const top = filterRef.value.getBoundingClientRect().top;
  dropdpwnTop.value = (top + buttonGroupRef.value.offsetHeight + 10) / 100;
});
</script>

<template>
  <div ref="filterRef" class="filter">
    <div ref="buttonGroupRef" class="button-group">
      <div
        v-for="item in menus"
        :key="item.value"
        class="button"
        :class="{ active: active === item.value }"
        @click="clickButton(item)"
      >
        <div class="text">{{ item.label }}</div>
      </div>
    </div>
    <div v-show="active" class="dropdown" :style="{ top: `${dropdpwnTop}rem` }">
      <div v-if="activeComponent" class="dropdown-content">
        <div class="dropdown-main">
          <component
            :is="activeComponent"
            :options="activeOptions"
            max-height="3rem"
          />
        </div>

        <div class="footer">
          <div class="button reset">重置</div>
          <div class="button confirm">确定</div>
        </div>
      </div>

      <div class="overlay" @click="close"></div>
    </div>
  </div>
</template>

<style scoped>
.filter {
  box-sizing: border-box;

  .button-group {
    display: flex;
    font-size: 0.12rem;

    .button {
      border: 1px solid #fff;
      border-radius: 0.1rem;
      height: 0.2rem;
      min-width: 0.5rem;
      margin-right: 0.1rem;
      padding-right: 0.1rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      &:last-child {
        margin-right: 0;
      }

      &::after {
        content: '';
        width: 0.05rem;
        height: 0.05rem;
        position: absolute;
        top: 0.04rem;
        right: 0.06rem;
        border: 1px solid;
        border-color: transparent transparent #fff #fff;
        transform: rotate(315deg);
      }

      &.active::after {
        top: 0.08rem;
        transform: rotate(135deg);
      }
    }
  }

  .dropdown {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;

    .dropdown-content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 99;

      .dropdown-main {
        background-color: #fff;
        padding: 0.04rem;
      }

      .footer {
        background-color: #fff;
        height: 0.5rem;
        border-top: 1px solid #333;
        display: flex;
        justify-content: center;
        align-items: center;

        .button {
          background-color: beige;
          border-radius: 0.12rem;
          height: 0.3rem;
          min-width: 0.8rem;
          display: flex;
          justify-content: center;
          align-items: center;

          &.reset {
            color: blue;
          }

          &.confirm {
            margin-left: 0.08rem;
            background-color: blue;
          }
        }
      }
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
    }
  }
}
</style>
